Home Page Web Makeover
As part of my ongoing training, I participated in an Adobe XD workshop were we "redesigned" Fandango's Home page, paying particular attention to the search feature experience. Below is a recap of the project complete with feedback and reiteration of design.
Problem/Evaluation
1. No clear call to action can be easily found on their existing Home page;
2. The layout/design is “haphazard”, jumping from movie posters, to video interviews and multiple trailers, to large ad banners. There is too much going on.
3. The drop down menu of movies is hidden in a very small, almost secondary menu across the top of the page.
Competitive Analysis
Atomtickets.com - This website offers a clear call to action (CTA) for the audience, that sits within a creative way to showcase now playing movies i.e. mini film screen. Use of the poster background makes it cluttered however.
Cinemark.com - This site offers a large CTA, actually two, where the user can search for showtimes. That said, the CTA is too far down the page. The ability to search by actual location or zip code is handy particularly when using a mobile device.
Movietickets.com - Good example of clean and easy to read top menu navigation bar.
Design Inspiration
Creative way to search for specific movie within a “theater screen” effect.
Better layout and design with more brand consistency. Also offers “filters” to enhance the search.
Sketched Wireframe
Using a variety of elements, this design provides a prominent search feature, additional methods to search and purchase tickets, more consistent layout and design, improved menu navigation, while still using the elements important to Fandango and its stakeholders.
Fandango Home Page Makeover - Version 1
Feedback - Reiteration
I received feedback from several friends and colleagues, as well as the Adobe XD Discord Group. The following was complimented and suggested:
-Liked the hero image at the top
-Liked structure and layout
-Liked navigation bar
-Movie cards look nice
-Suggest decreasing the size of the search icon
-Suggest adding movie titles below the cards
Fandango Home Page Makeover - Version 2 (post feedback)
Lessons Learned
In researching why movie ticketing websites are designed the way they are, it was interesting to note that they have a long list of audiences they try to appeal to. Their audience is not just the movie going public seeking to buy a ticket, but also the film distribution company, production studio, and even the popcorn supplier. With such a large demographic to try to appease, you can see why these websites are so busy. I took the approach in keeping a site simple, purposeful and useful, would allow for a better user experience for the public. In the end, that would result in the bottom line - ticket sales. When the movie does well, the these other stakeholders should be happy.
In my paper wireframe, I created a Home page for fandango.com, with three ways to search for movies and showtimes. Users can search through the top navigation icon, through a search bar above the fold, and through the search criteria filter just under the first block of movie posters/cards, Along with consistency of elements and design, I added existing Fandango branding and larger CTA icons and images.
The use of movie posters brands a particular movie, but they tend to be very loud and much of the time unreadable. Most of these posters are designed as full size "out-of-home" advertisements meant for large locations like the side of a bus shelter. Thus when reduced down for use on a website, or worse a mobile app, other than branding there isn't much information readable on them. To keep the brand yet help the user, I elected to use just four posters across both the Now Playing and Coming Soon blocks on Fandango's Home page. Additional movies in each category would populate with the right-hand scroll. This maximizes the space available, and offers a more readable experience for the user.
In closing, this was a fun project and I learned a lot from both the topic research I performed, and my test user groups. I look forward to having Fandango adopt some of these ideas.
